<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 1000px;
            margin: 100px auto;
        }
        .nav{
            text-align: right;
            margin-bottom: 20px;
        }
        .nav a{
            margin: 10px;
            padding: 8px 10px;
            border-bottom: 2px solid transparent;
            text-decoration: none;
            color: #333;
        }
        .nav a:first-child{
            color: brown;
            border-color: brown;
        }
        .box > ul{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        .box > ul li{
            width: 24%;
            text-align: center;
            padding: 15px;
            box-sizing: border-box;
            background-color: pink;
            margin-bottom: 10px;
            list-style: none;
        }
        .box > ul li img{
            width: 70%;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="nav">
            <a href="">分类1</a>
            <a href="">分类2</a>
            <a href="">分类3</a>
            <a href="">分类4</a>
        </div>
        <ul>
            
        </ul>
    </div>
    <script src="../08-26/a.js"></script>
    <script>
        // 1.获取数据
        // console.log(arr); 
        //arr中有四个数组,页面加载完成后需要获取第一个渲染在页面上
        // console.log(arr[0]); //是个对象,当中的data是需要渲染的数组
        // 2.页面加载完成后获取需要的第一个data数组
        // console.log(arr[0].data);
        // var data = arr[0].data; //[{},{},{},{}]  拿个变量得到,可以用的时候写的短一点
        // // 5.要获取到循环中的每一个li标签 在循环之前先声明一个字符串用来拼接所有的li
        // var str = "";
        // // 3.获取数组内的每一条数据,固定的遇见数组就循环就对了
        // for(var i = 0;i < data.length;i++){
        //     // 循环得到每个对象 每个对象都需要对应一个li标签(一个列表样式)
        //     // console.log(data[i]);
        //     // 4.创建li标签以及标签标签的内容 (在内容中将获取的对象中的数据拼接在标签内容里)
        //     str += `<li>
        //         <img src="${data[i].url}" alt="">
        //         <h3>${data[i].title}</h3>
        //     </li>`
        // }
        // // str在循环后得到根据数据数量生成的所有li
        // // console.log(str);
        // // 6.获取到ul标签;
        // var ul = document.querySelector(".box > ul");
        // // 7.讲str渲染进ul标签内
        // ul.innerHTML = str;

        // 17.考虑使用了两次渲染的代码 可以对这段代码进行封装
        function test(a){
            // 18.在函数调用的时候参数的设置
            // 要考虑本身编写多次时,那个值是不一样的,那么这个值就可以所谓参数
            // 现在就是将获取数组arr中第几个data数组中的索引值更改为参数
            var data = arr[a].data; //[{},{},{},{}]
            var str = ""
            for(var i = 0;i < data.length;i++){
                // console.log(data[i]);
                str += `<li>
                    <img src="${data[i].url}" alt="">
                    <h3>${data[i].title}</h3>
                </li>`
            }
            // console.log(str);
            var ul = document.querySelector(".box > ul");
            ul.innerHTML = str;
        }
        // 19.全局调用一次
        test(0)

        // 8.要获取到所有的a  [a,a,a,a]
        var as = document.querySelectorAll(".nav > a");
        // 9.获取数组内每个值 (必定是循环)
        for(var k = 0;k < as.length;k++){
            // 14.因为需要点击获取当前标签的索引值,用来获取arr数组中相对应索引值的data数组
            // 给每个a添加一个自定义属性 值是这个标签的索引值
            as[k].index = k;
            // 10.给每个a设置点击事件
            as[k].onclick = function(e){
                // 11.如果是点击事件 a有href的默认事件需要先取消
                e.preventDefault();
                // 12.排他思想 先给每个a设置都为初始样式
                for(var m = 0;m < as.length;m++){
                    as[m].style.borderColor = "transparent";
                    as[m].style.color = "#333";
                }
                // 13.再给当前标签设置特殊样式
                this.style.borderColor = "brown";
                this.style.color = "brown";
                // 15.就可以获取到当前标签的索引值
                // console.log(this.index);
                var n = this.index;
                // console.log(arr[n].data);
                // 16.先将渲染的代码复制粘贴一份,再更改数据获取的索引值为n
                // var data = arr[n].data; //[{},{},{},{}]  拿个变量得到,可以用的时候写的短一点
                // // 5.要获取到循环中的每一个li标签 在循环之前先声明一个字符串用来拼接所有的li
                // var str = "";
                // // 3.获取数组内的每一条数据,固定的遇见数组就循环就对了
                // for(var i = 0;i < data.length;i++){
                //     // 循环得到每个对象 每个对象都需要对应一个li标签(一个列表样式)
                //     // console.log(data[i]);
                //     // 4.创建li标签以及标签标签的内容 (在内容中将获取的对象中的数据拼接在标签内容里)
                //     str += `<li>
                //         <img src="${data[i].url}" alt="">
                //         <h3>${data[i].title}</h3>
                //     </li>`
                // }
                // // str在循环后得到根据数据数量生成的所有li
                // // console.log(str);
                // // 6.获取到ul标签;
                // var ul = document.querySelector(".box > ul");
                // // 7.讲str渲染进ul标签内
                // ul.innerHTML = str;
                // 20.点击时调用一次
                test(n)
            }
        }
    </script>
</body>
</html>